<template>
    <CanvasPanel :items="state.items"></CanvasPanel>
   
 </template>
 
 <script lang="ts" setup="" name="zutai1">
   import { ref,reactive } from "vue";
   import { ElMessageBox, ElMessage } from "element-plus";
   //import { auth } from '/@/utils/authFunction';
   //import { CanvasUtil } from '/@/utils/canvasUtil';
   import CanvasPanel from '/@/views/zutai/component/canvasPanel.vue'
import { l } from "vite/dist/node/types.d-aGj9QkWt";
    const myCanvas = ref();
  const state=reactive({
     //ctx:any,
     items : ref<any>([]),
     switchs : ref<any>([]),
     test:0
  })
 const choseSwitchs=()=>{
  
  for(var i=0;i<state.items.length;i++){
       var item=state.items[i];
       console.log(item);
       if(item.itemtype=='switch'){
        state.switchs.push(item);
       }
     }
 }
 const initData=()=>{
    
    state.items=[
         {
           itemtype:'rect',
           top:10,
           left:10,
           width:20,
           height:40,
           color:'orange'
         },
         {
           itemtype:'line',
           top:30,
           left:30,
           endtop:30,
           endleft:50,
           width:1,
           color:'blue'
         },
         {
          id:1,
           itemtype:'switch',
           top:30,
           left:50,
           direction:1,
           state:1,
           arrow:true
         }
       ,
         {
           itemtype:'rect',
           top:10,
           left:70,
           width:20,
           height:40,
           color:'orange'
         },
         ,
         {
          itemtype:'line',
           top:50,
           left:80,
           endtop:70,
           endleft:80,
           width:1,
           color:'blue'
         },
         {
          id:2,
           itemtype:'switch',
           top:70,
           left:80,
           direction:2,
           state:0,
         
         },
         {
           itemtype:'rect',
           top:120,
           left:60,
           width:40,
           height:20,
           color:'orange'
         },{
           itemtype:'line',
           top:130,
           left:100,
           endtop:130,
           endleft:150,
           width:1,
           color:'blue',
           arrow:false
         },
         
         {
           itemtype:'line',
           top:130,
           left:150,
           endtop:70,
           endleft:150,
           width:1,
           color:'blue',
           arrow:true
         },
         {
          id:4,
           itemtype:'switch',
           top:70,
           left:150,
           direction:4,
           state:0,
         
         },
         {
           itemtype:'line',
           top:70,
           left:80,
           endtop:100,
           endleft:80,
           width:1,
           color:'blue',
           arrow:true
         },
         {
          itemtype:'line',
           top:30,
           left:90,
           endtop:30,
           endleft:110,
           width:1,
           color:'blue'
         },
         {
          id:3,
           itemtype:'switch',
           top:30,
           left:110,
           direction:1,
           state:0,
           arrow:true
         },{
           itemtype:'rect',
           top:10,
           left:130,
           width:50,
           height:40,
           color:'orange'
         },
       ];
       console.log(state.items);
       //choseSwitchs();
 }

 initData(); 

 setInterval(function(){
    for(var i=0;i<state.items.length;i++){
      var  item=state.items[i];
      try{
          if(item.itemtype=='switch'){
            if(item.id==1){
                if(item.state==0){
                  item.state=1;
                }else if(item.state==1){
                  item.state=3;
                }else{
                  item.state=0;
                }
            }
            if(item.id==2){
              if(item.state==0){
                  item.state=3;
                }else if(item.state==3){
                  item.state=1;
                }else{
                  item.state=0;
                }
            }
          }
      }catch{
        console.log(item)
      }
    }


  },15000)
 </script>
 <style scoped>
 :deep(.el-ipnut),
 :deep(.el-select),
 :deep(.el-input-number) {
     width: 100%;
 }
 </style>